import React from 'react';
import {Link, useHistory} from 'react-router-dom';
import qs from 'qs';
export const NoRouteComp = function (props) {
    console.log(props);
    const history = useHistory();
    return (
        <>
            没有经过Route渲染，所以没有props，但是在HashRoute里面，所以useHistory有值
            <br/>
            <h5>----------------------------</h5>
            <Link to={{
                pathname: '/',//跳转路径地址
                state: {
                    id:1,
                    name:2,
                    age:3
                },//隐式传参
                search:'id=2'//问号传参
            }} replace>replace 的意思是不新增历史记录而是替换当前历史记录</Link>
            <br/>
            <h5>------------------------------</h5>
            <button onClick={()=>{
                history.push({
                    pathname: '/',
                    state: {
                        id:1,
                        name:2,
                        age:3
                    },
                    search:'id=2'
                });
            }}>back to the root</button>

            <br/>
            <h5>------------------------------</h5>
            <button onClick={() => {
                history.push({
                    pathname: '/a/a2',
                    state: {},
                    search:qs.stringify({
                        id:2,
                        name:3,
                        age:3,
                        value:'33'
                    })
                })
            }}>
                qs stringify goto root
            </button>
            <br/>
            <h5>------------------------------</h5>
            <button onClick={() => {
                let item = '?id=2&name=3&value=3';
                console.log(qs.parse(item));
            }}>qs test</button>
            <br/>
            <h5>------------------------------</h5>
            <button onClick={() => {
                history.push('/a/a3/100/zs')
            }}>
               路由表地址传参
            </button>
            <br/>
            <h5>------------------------------</h5>

            <button onClick={() => {
                history.push({
                    pathname: '/a/a4',
                    state: {
                        id:1,
                        name:'zs',
                        age:16
                    }
                })
            }}>
                state隐式传参
            </button>
        </>
    )
};